<template>
  <div class="box">
   <header class="header">
    <van-nav-bar title="详情" left-text="返回" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
   </header>
    <div class="content">
      <div class="detail-heder">
        <div class="detail-jz">
          <div class="jz"><img :src="playliste.coverImgUrl" alt=""></div>
          <div class="jy">
            <h2>{{playliste.name}}</h2>
            <span>{{playliste.tags}}</span>
          </div>
        </div>
          <div class="bott">
            <van-icon name="like-o" color="red" /><i class="fonts">{{playliste.subscribedCount}}</i>
            <van-icon name="comment-circle-o" color="black"/><i class="fonts">{{playliste.commentCount}}</i>
            <van-icon name="service-o" color="#056948"/>
          </div>
      </div>
        <p class="yuyin">
        <van-notice-bar :text="playliste.description" left-icon="volume-o" color="#333" background="#6464" :scrollable="true"/>
        </p>
      <div class="detail-botton">
      <h1>全部播放</h1>
        <ul>
          <li v-for="item in trackst" :key="item.id" @click="MP3(item)">
              <img :src="item.al.picUrl" alt="">
              <div class="detespm">
              <h3>{{item.name}}</h3>
              <p>{{item.ar[0].name}}</p>
              </div>
            <div class="detaico">
              <van-icon name="play-circle-o" size="23" class="icons" />
              <van-icon name="like-o" size="20"/>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { getDetail } from '@/api'
import Vue from 'vue'
import { NavBar, Icon, NoticeBar } from 'vant'
Vue.use(Icon)
Vue.use(NavBar)
Vue.use(NoticeBar)
export default {
  name: '',
  data () {
    return {
      trackst: [],
      playliste: [],
      mp: ''
    }
  },
  // 创建实例
  created () {
  },
  // 实例挂载
  mounted () {
    const { id } = this.$route.params
    getDetail({ id }).then(res => {
      this.trackst = res.data.playlist.tracks
      this.playliste = res.data.playlist
    })
  },
  methods: {
    ...mapActions(['getaaa']),
    onClickLeft () {
      this.$router.go(-1)
    },
    MP3 (item) {
      this.getaaa(item.id)
      localStorage.setItem('picUrl', item.al.picUrl)
    }
  }
}
</script>

<style lang="scss" scoped>
html,body{
  background: #222;
}
.fonts{
  font-size: 0.11rem;
  margin-left: -0.8rem;
  margin-top: 0.05rem;
}
.container{
  .box{
    background: #222;
  }
}
.content{
  padding: 0.1rem;
  .detail-heder{
    height: 3rem;
    position: relative;
    img{
      width: 100%;
      height: 3rem;
    }
    h2{
      color: #ffcc325e;
      font-weight: bolder;
      font-size: 0.13rem;
      position: absolute;
      top: 0.15rem;
      left: 0.1rem;
    }
    span{
      color: rgba(255, 255, 255, 0.514);
      font-weight: bolder;
      position: absolute;
      bottom: 0.4rem;
      right: 0.1rem;
    }
  }
  .detail-botton{
    h1{
      color: #ffcd32;
      margin-top: 0.1rem;
      // text-indent: 0.2rem;
      margin-bottom: -0.1rem;
    }
    ul{
      margin-top: 0.25rem;
      li{
        margin-top: 0.18rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
         img{
            width: 0.5rem;
            margin-right: 0.12rem;
         }
        .detespm{
          margin-left: -0.1rem;
          width: 1.8rem;
          h3{
            text-indent: 0.1rem;
            width: 1.8rem;
            font-weight: lighter;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            color: #fff;
          }
          p{
            text-indent: 0.1rem;
            color: rgba(255, 255, 255, 0.603);
            font-size: 0.1rem;
          }
        }
        .detaico{
          .icons{
            margin-right: 0.1rem;
          }
        }
      }
    }
  }
  .bott{
    display: flex;
    justify-content: space-between;
    font-size: 0.21rem;
    color: #ffffff;
    margin-top: -0.3rem;
    padding: 0 0.2rem;
  }
}
/deep/.van-nav-bar{
  background: #222;
  .van-nav-bar__title{
    color: #fff;
  }
  .van-nav-bar__text{
    color: rgba(255, 255, 255, 0.514);
  }
}
/deep/.van-notice-bar__wrap{
  color: #fff;
}
/deep/.van-icon::before{
  color: red;
}
</style>
